<template>
  <router-link tag="section" class="seckill" to="/footer/home/seckillcontent">
    <div class="title">
      <p class="left">京东秒杀</p>
      <p class="right">更多秒杀<span class="cubeic-arrow"></span></p>
    </div>
    <cube-scroll
      ref="scroll"
      :data="seckill.seckillList"
      direction="horizontal"
      class="horizontal-scroll-list-wrap">
      <ul class="list-wrapper">
        <li
          v-for="(item, index) in seckill.seckillList"
          :key="index"
          class="list-item">
          <img :src="item.imgUrl"/>
          <p>{{'￥' + item.price}}</p>
          <span>{{'￥' + item.removePrice}}</span>
        </li>
      </ul>
    </cube-scroll>
  </router-link>
</template>

<script>
export default {
  name: 'Seckill',
  props: ['seckill']
}
</script>

<style lang="stylus" scoped>
  .seckill
    background #ffffff
    margin 10px
    box-sizing border-box
    .title
      width 100%
      display flex
      justify-content space-between
      padding 10px 8px
      box-sizing border-box
      .left
        color #000
        font-weight 600
        font-size 16px
      .right
        color #f23030
        font-size 12px
  .seckill >>> .cube-scroll-content // 必须写 要不然不会滚动 当前页给cube-scroll-content设置display: inline-block;
    display inline-block
  .horizontal-scroll-list-wrap
    .cube-scroll-content
      display: inline-block
    .list-wrapper
      padding: 5px 10px
      line-height: 1
      white-space: nowrap
    .list-item
      display: inline-block
      margin-left 14px
      width auto
      text-align center
      img
        width 61px
      p
        font-family JDZhengHT-EN-Bold
        font-size 16px
        font-weight 600
        margin 4px 0 -5px
        color #e93b3d
      span
        font-size 14px
        text-decoration line-through
        color #999
    .list-item:first-child
      margin-left 0
</style>
